<template>
  <dw-menu-datagrid-form
    ref="userGridRef"
    :init-loaded="false"
    :columns="columns"
    v-model:activeFormData="formData"
    :data-grid-title="dataGridTitle"
    :render-form-title="renderFormTitle"
    :get-page-http-config="getPageHttpConfig"
    :del-info-http-config="delInfoHttpConfig"
    :del-list-http-config="delListHttpConfig"
    :get-info-http-config="getInfoHttpConfig"
    :add-info-http-config="addInfoHttpConfig"
    :update-info-http-config="updateInfoHttpConfig"
  >
    <template #formSlot>
      <table class="dw-form-table">
        <tbody>
          <tr>
            <td class="dw-td-label"><span class="required">登录账户</span></td>
            <td>
              <el-form-item
                prop="loginCode"
                :rules="[
                  {
                    required: true,
                    message: '登录账号不能为空',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.loginCode" placeholder="请输入登录账号..."></el-input>
              </el-form-item>
            </td>
            <td class="dw-td-label"><span class="required">姓名</span></td>
            <td>
              <el-form-item
                prop="userName"
                :rules="[
                  {
                    required: true,
                    message: '用户姓名不能为空',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.userName" placeholder="请输入姓名..."></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label"><span class="required">归属团队</span></td>
            <td>
              <el-form-item>
                <tree-select v-model="formData.teamIdList" :multiple="true" :url="treeUrl"></tree-select>
              </el-form-item>
            </td>
            <td class="dw-td-label">
              <span>性别</span>
            </td>
            <td>
              <el-form-item
                prop="sex"
                :rules="[
                  {
                    required: true,
                    message: 'Please input Activity name',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-radio-group v-model="formData.sex">
                  <el-radio :value="1">男</el-radio>
                  <el-radio :value="2">女</el-radio>
                  <el-radio :value="9">保密</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label">
              <span class="required">手机号码</span>
            </td>
            <td>
              <el-form-item prop="telephone">
                <el-input v-model="formData.telephone" placeholder="请输入电话号码..."></el-input>
              </el-form-item>
            </td>
            <td class="dw-td-label"><span class="required">邮箱</span></td>
            <td>
              <el-form-item prop="email">
                <el-input v-model="formData.email" placeholder="请输入邮箱..."></el-input>
              </el-form-item>
            </td>
          </tr>

          <tr>
            <td class="dw-td-label"><span class="required">状态</span></td>
            <td>
              <el-form-item prop="validFlag">
                <el-switch v-model="formData.validFlag" class="ml-2" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" acti active-text="有效" inactive-text="无效" />
              </el-form-item>
            </td>
            <td class="dw-td-label"><span>排序</span></td>
            <td>
              <el-form-item prop="sortNo" :rules="[]">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label"><span>用户简介</span></td>
            <td colspan="3">
              <el-form-item prop="userMemo">
                <el-input v-model="formData.userMemo" maxlength="250" placeholder="请输入用户简介信息..." show-word-limit type="textarea" />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="dw-td-label">分配项目</td>
            <td colspan="3" style="margin: 0; padding: 0">
              <el-alert type="warning" :closable="false">
                <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
                  <div>删除和重新分配项目后，需要进行保存操作，才能生效</div>
                  <div>
                    <el-button icon="Share" type="primary">分配项目</el-button>
                    <el-button icon="Delete" type="danger">批量删除</el-button>
                  </div>
                </div>
              </el-alert>
              <el-table :data="tableData" border>
                <el-table-column prop="date" label="项目名称">
                  <template #header>
                    <div style="display: flex; justify-content: space-between">
                      <span>项目名称</span>
                      <el-input placeholder="输入关键字搜索" style="width: 250px">
                        <template #append>
                          <el-icon><Search /></el-icon></template
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="项目负责人" width="220" />
                <el-table-column prop="date" label="上线时间" width="200" />
                <el-table-column prop="operation" label="操作" width="160" align="center">
                  <template #default="scope">
                    <el-button icon="Delete" type="danger" link>删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </td>
          </tr>
        </tbody>
      </table>
    </template>
  </dw-menu-datagrid-form>
</template>
<script setup lang="ts">
import type { IColumn, IAddInfoHttpConfig, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { IUser } from '../user';
import { ref } from 'vue';
defineOptions({
  name: 'UserMenuFormGrid',
});
const userGridRef = ref();
const dataGridTitle = '用户管理';
const params = ref({
  keyword: '',
  teamId: '',
});
const treeUrl = '/admin-api/sys/team/list';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IUser) => {
  return stateValue == 'add' ? '用户信息' : data.userName;
};
const formData = ref<IUser>({
  id: '',
  loginCode: '',
  userName: '',
  sex: 0,
  telephone: '',
  email: '',
  userMemo: '',
  validFlag: 1,
  teamIdList: [],
  sortNo: 1,
});

const columns = ref<IColumn[]>([
  {
    prop: 'loginCode',
    label: '登录账号',
    width: 200,
  },
  {
    prop: 'userName',
    label: '姓名',
    align: 'left',
    width: 200,
  },
  {
    prop: 'userMemo',
    label: '用户简介',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/user/#{id}',
  delInfoMsgEmphasize: '#{uerName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/user/list',
};
const getPageHttpConfig: IGetPageHttpConfig<IUser> = {
  url: '/admin-api/sys/user/page/list',
  query: () => {
    return params.value;
  },
};
const getInfoHttpConfig: IGetInfoHttpConfig<IUser> = {
  url: '/admin-api/sys/user/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IUser> = {
  url: '/admin-api/sys/user',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IUser> = {
  url: '/admin-api/sys/user',
};
const loadData = (teamId: string) => {
  params.value.teamId = teamId;
  userGridRef.value.loadData();
};
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];
defineExpose({ loadData });
</script>
<style lang="scss" scoped>
:deep(.el-alert__content) {
  width: 100%;
}
</style>
